import React from 'react';
import {Icon, Center} from 'native-base';
import {Path, G} from 'react-native-svg';

const Example = props => {
  const Img = () => {
    if (props.pause)
      return (
        <G fillRule="nonzero" stroke="none" strokeWidth={1} fill="none">
          <Path
            d="M510.7 962.4c-60.7 0-119.5-11.9-175-35.3-53.5-22.6-101.6-55-142.9-96.3-41.3-41.3-73.7-89.3-96.3-142.9-23.4-55.4-35.3-114.3-35.3-175s11.9-119.5 35.3-175c22.6-53.5 55-101.6 96.3-142.9 41.3-41.3 89.3-73.7 142.9-96.3 55.4-23.4 114.3-35.3 175-35.3s119.5 11.9 175 35.3c53.5 22.6 101.6 55 142.9 96.3 41.3 41.3 73.7 89.3 96.3 142.9 23.4 55.4 35.3 114.3 35.3 175s-11.9 119.5-35.3 175c-22.6 53.5-55 101.6-96.3 142.9-41.3 41.3-89.3 73.7-142.9 96.3-55.5 23.4-114.3 35.3-175 35.3z m0-854.9c-223.5 0-405.4 181.9-405.4 405.4s181.9 405.4 405.4 405.4 405.4-181.9 405.4-405.4-181.9-405.4-405.4-405.4z"
            fill="#231815"></Path>
          <Path
            d="M404.9 336.3v352.6l305.4-176.3z"
            fill="#231815"></Path>
        </G>
      );
    else
      return (
        <G fillRule="nonzero" stroke="none" strokeWidth={1} fill="none">
        <Path
          d="M511.5904 980.6848c-256.896 0-465.92-208.9984-465.92-465.92 0-256.896 209.024-465.92 465.92-465.92s465.92 209.024 465.92 465.92c0 256.9216-208.9984 465.92-465.92 465.92z m0-870.4c-223.0272 0-404.48 181.4528-404.48 404.48s181.4528 404.48 404.48 404.48 404.48-181.4528 404.48-404.48-181.4528-404.48-404.48-404.48z"
          fill="#231815"></Path>
        <Path d="M408.7552 700.032c-16.9728 0-30.72-13.7472-30.72-30.72V358.7328c0-16.9728 13.7472-30.72 30.72-30.72s30.72 13.7472 30.72 30.72v310.6048c0 16.9472-13.7472 30.6944-30.72 30.6944zM610.56 700.032c-16.9728 0-30.72-13.7472-30.72-30.72V358.7328c0-16.9728 13.7472-30.72 30.72-30.72s30.72 13.7472 30.72 30.72v310.6048c0 16.9472-13.7728 30.6944-30.72 30.6944z"
        fill="#231815"></Path>
        </G>
      );
  };
  return (
      <Icon size="md" viewBox="0 -100 1000 1100">
        <G fillRule="nonzero" stroke="none" strokeWidth={1} fill="none">
          <Img></Img>
        </G>
      </Icon>
  );
};

export default props => {
  return (
    <Center>
      <Example pause={props.pause} />
    </Center>
  );
};
